<template>
  <div>
    <el-row>
      <el-col :span="16">
        <div class="mychart" :id="'chart' + _uid"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import worldMap from "@/assets/world.json";


export default {
  data () {
    return {
      _uid: '',
      data: [],
      mychart: {},
      option: {
        tooltip: {
          trigger: "item",
        },
        geo: {
          map: "world",
          top: "5%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          label: {
            emphasis: {
              show: false,
            },
          },
          aspectScale: 0.75,
          // zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "#2c6a96",
              borderColor: "#83cbf8", // '#1E4E8B'
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#2c6a96",
              borderColor: "#83cbf8", // '#1E4E8B'
            },
          },

        },
        series: [],
      },
      geoCoordMap: {
        "郑州": [109.5313, 32.8773],
        "安哥拉-罗安达": [13.0333333333, -8.083333333],
        "澳洲-墨尔本": [144.9755859375, -37.8141237016],
        "澳洲-悉尼": [151.28333333333333, -33.916666666666664],
        "澳洲-堪培拉": [149.0844726563, -35.3173663292],
        "德国-布鲁塞尔": [4.3450927734, 50.8510411297],
        "德国-法兰克福": [8.701171875, 50.1346643222],
        "德国-柏林": [13.4088134766, 52.5162208639],
        "俄罗斯-莫斯科": [37.6391601563, 55.7642131648],
        "英国-伦敦": [-0.1318359375, 51.4676969562],
        "英国-邓斯特布尔": [-0.4648160934, 52.1371890032],
        "法国-巴黎": [2.3510742188, 48.8357974624],
        "法国-蒙彼利埃": [3.8616943359, 43.6042618681],
        "加拿大-温哥华": [-123.1182861328, 49.2964716027],
        "柬埔寨-西哈努克": [103.5210800171, 10.6275412459],
        "捷克-塔博尔": [14.6722412109, 49.4073990589],
        "捷克-布拉格": [14.4415283203, 50.0747692335],
        "马来西亚-甘榜峇鲁": [101.7095374642, 3.1619413302],
        "马来西亚-巴生": [101.4546203613, 3.028069379],
        "美国-华盛顿": [-77.0251464844, 38.8824811976],
        "美国-波特兰": [-122.65960693359997, 45.59190960761732],
        "美国-洛杉矶": [-118.2238769531, 34.0344526097],
        "美国-纽约": [-76.9921875, 38.6511983323],
        "美国-芝加哥": [-87.5830078125, 41.8368278607],
        "美国-西雅图": [-122.3327636719, 47.5913464768],
        "美国-旧金山": [-122.434387207, 37.7479148249],
        "美国-核桃市": [-118.2470297813, 34.0542772204],
        "美国-奇诺": [-117.7322387695, 33.9900571345],
        "美国-詹姆斯堡": [-74.4395828247, 40.3521695963],
        "缅甸-仰光": [96.1976623535, 16.8610624585],
        "日本-东京": [139.7570800781, 35.6929946321],
        "日本-大阪": [135.4998779297, 34.6874279493],
        "韩国-首尔": [126.9895935059, 37.5511101601],
        "沙特-达曼": [72.8321456909, 20.3964450705],
        "泰国-曼谷": [100.5084228516, 13.7633957796],
        "泰国-春武里": [101.0110473633, 13.3388476879],
        "泰国-北榄": [100.6114193425, 13.5952693961],
        "老挝-万象": [102.6438903809, 17.9774268559],
        "越南-胡志明": [106.6223144531, 10.8009326407],
        "西班牙-马德里": [-3.7, 40.43333333333333],
        "新加坡-新加坡": [103.8647460938, 1.2962761196],
        "印度-孟买": [72.85, 18.9333333333],
        "印度-新德里": [77.216666666, 28.6166666666],
        "埃塞俄比亚-亚的斯亚贝巴": [38.759765625, 9.0044515617],
        "荷兰-阿姆斯特丹": [4.8944091797, 52.3722455687],
        "荷兰-欧德米尔": [4.6459722519, 52.3875181437],
        "荷兰-鹿特丹": [4.4714355469, 51.9103907099],
        "伊拉克-巴格达": [44.3627929688, 33.2846199689],
        "中国-香港": [114.1968232013, 22.2863306587],
      },
      queryForm: {
        order: "",
        orderField: "",
        start: 0,
        statEndTime: "",
        statStartTime: "",
        statTime: "",
        zoneName: "",
      },
    };
  },
  methods: {
    convertData (data) {
      const res = [];
      for (let i = 0; i < data.length; i++) {
        const dataItem = data[i];
        const fromCoord = this.geoCoordMap[dataItem[0].name]; // 始发地
        const toCoord = this.geoCoordMap[dataItem[1].name]; // 目的地

        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord], // 一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
          });
        }
      }
      return res;
    },
    setOption () {
      const HZData = this.data;
      const series = [];
      series.push(
        {
          type: "lines",
          zlevel: 0,
          symbol: ["none", "arrow"],//箭头标记
          symbolSize: 15, // 标记大小
          symbolOffset: [0, -10],
          lineStyle: {
            normal: {
              width: 2,
              curveness: 0.9,
              color: "white",
            },
          },
          tooltip: {
            show: true,
          },
          data: this.convertData(HZData),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 1,
          rippleEffect: {
            brushType: "fill",
            period: 5,
            scale: 8,
          },
          symbolSize: function (val) {
            return val[2] / 15; //根据经纬度第二哥值大小动态设置symbolSize
          },
          tooltip: {
            show: true,
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: true,
            offset: [10, 10],
            color: "rgba(255,52,21)",
            fontWeight: "bold"
          },
          itemStyle: {
            color: (val) => {
              if (val.name == "郑州") {
                return "rgba(0,0,205,0.64)";
              } else {
                return "rgba(255,52,21,0.60)";
              }
            },
          },
          data: HZData.map((dataItem) => {
            return {
              name: dataItem[1].name, //城市名称
              value: this.geoCoordMap[dataItem[1].name].concat(80), //城市经纬度,
            };
          }),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          // zlevel: 4,
          // rippleEffect: { number: 0, period: 0, scale: 1 },
          // symbol: function (val) {
          //   return "image://";
          // },
          // symbolSize: function (val) {
          //   return val[2] / 5;
          // },
          tooltip: {
            // show: true,
            // position: "top",
            // backgroundColor: "rgba(7,18,32,0.5);",
            // padding: 0,
            // borderWidth: 1,
            // borderColor: "rgba(34,139,241,0.9)",
            // textStyle: { // 提示框浮层的文本样式。
            //   color: '#fff',
            //   fontStyle: 'normal',
            //   fontWeight: 'normal',
            //   fontFamily: 'sans-serif',
            //   fontSize: 12,
            // },
            formatter: (val) => {
              // console.log(val)
              return `<div style="width: 302px;
                      height: 149px;
                      border-radius: 20px;
                      padding:20px 23px;
                      box-sizing: border-box;
                     ">
                      <div>${val.name}</div>
                      <div style="margin-top:12px">
                          <div class="bottom"
                            style=" display: flex;
                            justify-content: flex-start;
                            align-items: center;"
                          >
                            <div class="left"
                              style="width: 129px;
                              height: 68px;
                              "
                            >
                                <img style="width:100%;height:100%" src="${val.value[4].flagUrl}" alt="">
                            </div>
                            <div class="right"
                            style="color: #fff;
                                  display: flex;
                                  margin-left:16px;
                                  height: 68px;
                                  justify-content: space-between;
                                  flex-direction: column;
                                  font-size: 12px;
                                  padding:5px 0"
                            >
                              <span>班次号：${val.value[4].model}</span>
                              <span>周班次：${val.value[4].flghtNumber}</span>
                              <span>航空公司：${val.value[4].airlineCompany}68</span>
                            </div>
                          </div>
                      </div>
              </div>`;
            },
          },
          // label: {
          //   formatter: '{b}',
          //   position: 'right',
          //   show: true,
          //   color: "white",
          //   fontWeight: "bold"
          // },
          // symbolOffset: [0, -10],
          // symbolKeepAspect: false,
          data: HZData.map((dataItem) => {
            return {
              name: dataItem[0].name,
              value: this.geoCoordMap[dataItem[0].name].concat(
                81,
                dataItem[0].name,
                dataItem[0].value
              ),
            };
          }),
        }
      );
      this.option.series = series;
    },
    initMap () {
      echarts.registerMap("world", worldMap);
      this.mychart = echarts.init(document.querySelector("#chart" + this._uid));
      this.mychart.setOption(this.option);
      // this.mychart.on("click", { seriesIndex: 2 }, this.handleClick);//绑定事件
    },
    getTable () {
      // bigScreen.queryScreenHzjcgjhxPage(this.queryForm).then((res) => {
      // let geoCoordMap = { 郑州: [119.5313, 29.8773] };
      // 处理使用的数据
      // let result = res.data.result;
      // let result = [];

      this.data = [[{ name: "郑州", value: { model: 'G-2168', flghtNumber: '8', airlineCompany: '东方航空' } },
      { name: "美国-西雅图", value: { model: 'G-2168', flghtNumber: '8', airlineCompany: '东方航空' } }],
      [{ name: "西班牙-马德里", value: { model: 'G-2168', flghtNumber: '8', airlineCompany: '东方航空' } },
      { name: "印度-孟买", value: { model: 'G-2168', flghtNumber: '8', airlineCompany: '东方航空' } }],
      [{ name: "中国-香港", value: { model: 'G-2168', flghtNumber: '8', airlineCompany: '东方航空' } }, { name: "西班牙-马德里", value: { model: 'G-2168', flghtNumber: '8', airlineCompany: '东方航空' } },
      ]];
      // result.forEach((item) => {
      //   geoCoordMap[item.destinations] = [Number(item.longitude), Number(item.latitude)];
      //   this.data.push([{ name: "郑州" }, { name: item.destinations, value: item }]);
      // });
      // this.geoCoordMap = geoCoordMap;
      this.setOption();
      this.initMap();
      // });
    },
  },
  created () { },
  mounted () {
    this.getTable();
  },
};
</script>

<style lang="less" scoped>
.mychart
{
  width: 1000px;
  height: 600px;
  background-color: #104E8B;
}
</style>
